<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="../static/Valusl/js/jquery.js"></script>
    <link rel="stylesheet" href="../static/Valusl/css/comon0.css">

    <script type="text/javascript" src="/Valusl/js/jquery.js"></script>
    <link rel="stylesheet" href="/Valusl/css/comon0.css">
</head>
<script >
    $(window).load(function(){
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function(){
        var whei=$(window).width()
        $("html").css({fontSize:whei/20})
        $(window).resize(function(){
            var whei=$(window).width()
            $("html").css({fontSize:whei/20})
        });
    });
</script>

<script type="text/javascript" src="../static/Valusl/js/echarts.min.js"></script>
<!--<script language="JavaScript" src="../static/Valusl/js/js.js"></script>-->
<script type="text/javascript" src="/Valusl/js/echarts.min.js"></script>
<!--<script language="JavaScript" src="/Valusl/js/js.js"></script>-->

<script language='javascript' th:inline="javascript">
    $(function () {
        echarts_1();
        echarts_4();
        echarts_31();
        echarts_5();

        function echarts_1() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart1'));
            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    top:'10px',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [[${type}]],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },

                    axisTick: {
                        show: false,
                    },
                    axisLabel:  {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show:true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [
                    {
                        type: 'bar',
                        data: [[${value}]],
                        barWidth:'35%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color:'#2f89cf',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    }

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_5() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart5'));
            // var FenCiList = [];
            // var FenCiCount = [];
            // var FenCiData = [[${fenciList}]];
            // for (var i=0;i<FenCiData.length;i++){
            //     FenCiList.push(FenCiData[i]["fenci"]);
            //     FenCiCount.push(FenCiData[i]["count"]);
            // }
            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    top:'10px',
                    right: '0%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: [[${auther}]],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel:  {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show:true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: [[${authercount}]],
                    barWidth:'70%', //柱子宽度
                    barGap: "40%", //柱子之间间距
                    itemStyle: {
                        normal: {
                            color:'#0b87da',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_4() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart4'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#dddc6b'
                        }
                    }
                },
                legend: {
                    top:'0%',
                    data:['评论'],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize:'12',
                    }
                },
                grid: {
                    left: '10',
                    top: '30',
                    right: '10',
                    bottom: '10',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:  {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize:12,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    data: [[${time}]]

                }, {
                    axisPointer: {show: false},
                    axisLine: {  show: false},
                    position: 'bottom',
                    offset: 20,
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel:  {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize:12,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [
                    {
                        name: '评论',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {

                            normal: {
                                color: '#00d887',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 216, 135, 0.4)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(0, 216, 135, 0.1)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#00d887',
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12
                            }
                        },
                        data: [[${timeCount}]]
                    },

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_31() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fb1'));
            var musicList = [[${musicList}]];
            var musinListCount = [[${musinListCount}]];
            var dataList = [];
            for(var i=0;i<musicList.length;i++){
                dataList.push({
                    value:musinListCount[i],
                    name:musicList[i]
                })
            }
            option = {
                title: [{
                    text: '歌单种类',
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize:'16'
                    }
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position:function(p){   //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {

                    top:'70%',itemWidth: 10,
                    itemHeight: 10,
                    data:musicList,
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize:'12',
                    }
                },
                series: [
                    {
                        name:'歌单种类',
                        type:'pie',
                        center: ['50%', '42%'],
                        radius: ['40%', '60%'],
                        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                        label: {show:false},
                        labelLine: {show:false},
                        data:dataList
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    })
</script>
<body>
<div class="head">
    <h1>火花音乐数据可视化大屏</h1>
    <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
    <script>
        var t = null;
        t = setTimeout(time,1000);//開始运行
        function time()
        {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getFullYear();
            var mt=dt.getMonth()+1;
            var day=dt.getDate();
            var h=dt.getHours();//获取时
            var m=dt.getMinutes();//获取分
            var s=dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
            t = setTimeout(time,1000); //设定定时器，循环运行
        }

    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="width:100%;height: 350px">
                <div class="alltitle">歌曲分类</div>
                <div class="allnav" id="echart1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="allnav" id="echart2"></div>

            <div class="boxall" style="width:100%;height: 350px">
                <div style="height:100%; width: 100%;">
                    <div style="width: 100%; height:95%; margin-top: .25rem;" id="fb1"></div>
                    <div style="width: 100%; height:95%; margin-top: .25rem;" id="fb2"></div>
                    <div style="width: 100%; height:95%; margin-top: .25rem;" id="fb3"></div>
                </div>
                <div class="boxfoot">
                </div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" th:text="${GetCommentCount}">52131</li>
                        <li class="pulll_left counter" th:text="${GetMusicCount}">3726</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">总评论数 </li>
                        <li class="pulll_left">歌曲总数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div style="width: 94%;height: 580px;z-index: 5;margin-left: 3%;margin-top: 5px" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="width:100%;height: 350px">
                <div class="alltitle">评论时间线</div>
                <div class="allnav" id="echart4"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="width:100%;height: 350px">
                <div class="alltitle">评论热词</div>
                <div class="allnav" id="echart5"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<div class="back"></div>
<!--<script type="text/javascript" src="js/china.js"></script> -->
<script type="text/javascript" src="../static/Valusl/js/area_echarts.js"></script>
<script src='https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js'></script>
<script type="text/javascript" src="../static/Valusl/js/echarts-wordcloud.min.js"></script>

<script type="text/javascript" src="/Valusl/js/area_echarts.js"></script>
<script type="text/javascript" src="/Valusl/js/echarts-wordcloud.min.js"></script>
</body>
<script language='javascript' th:inline="javascript">
    var CiYunList = [[${ciyun}]];
    var CiYunData = [];
    for (var i=0;i<CiYunList.length;i++){
        CiYunData.push({
            name:CiYunList[i]["fenci"],
            value:CiYunList[i]["count"]
        })
        console.log(CiYunData)
    }
    var chart = echarts.init(document.getElementById('map_1'));
    var option = {
        tooltip: {},
        series: [ {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'pentagon',
            width: 580,
            height: 580,
            drawOutOfBound: false,
            textStyle: {
                color:"#49d79b"
                // color: function () {
                //     return 'rgb(' + [
                //         Math.round(Math.random() * 160),
                //         Math.round(Math.random() * 160),
                //         Math.round(Math.random() * 160)
                //     ].join(',') + ')';
                // }
            },
            emphasis: {
                textStyle: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: CiYunData
        } ]
    };
    chart.setOption(option);
    window.onresize = chart.resize;
</script>
</html>
